<template>
  <view class="preview-img" v-if="showBox" @touchmove.stop.prevent @click="close">
    <view class="pagebox" v-if="list.length > 0">{{ Number(currentIndex) + 1 }}/{{ list.length }}</view>
    <!-- <view class="close-icon" @click="close"><text class="aliicon">&#xe61b;</text></view> -->
    <!-- <view class="pre-icon" v-if="currentIndex > 0" @click="handleSwiper('pre')"><text class="aliicon">&#xe65c;</text></view> -->
    <!-- <view class="next-icon" v-if="currentIndex < list.length - 1" @click="handleSwiper('next')"><text class="aliicon">&#xe621;</text></view> -->
    <view class="mask">
      <swiper @change="changeSwiper" class="mask-swiper" :current="currentIndex" :circular="circular" :duration="duration">
        <swiper-item v-for="(src, i) in list" :key="i"><image class="mask-swiper-img" :src="src | formatImg" mode="aspectFit" /></swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  name: 'cus-previewImg',
  props: {
    circular: {
      type: Boolean,
      default: false
    },
    duration: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      currentIndex: 0,
      showBox: false,
      list: []
    };
  },
  watch: {
    list(val) {
      // console.log('图片预览', val)
    }
  },
  methods: {
    handleSwiper(type) {
      if (type === 'pre') {
        this.currentIndex = this.currentIndex - 1;
      } else if (type === 'next') {
        this.currentIndex = this.currentIndex + 1;
      }
    },
    // 左右切换
    changeSwiper(e) {
      this.currentIndex = e.target.current;
    },
    open(current, imgList) {
      this.list = imgList;
      if (!current || !this.list.length) return;
      this.currentIndex = this.list.indexOf(current);
      this.showBox = true;
    },
    close() {
      this.showBox = false;
    },
    // srcFunc(src){
    //   if(src.indexOf('?') !== -1){
    //     src = src.split('?')[0]
    //   }
    //   return src
    // },
  }
};
</script>

<style lang="scss" scoped>
@mixin full {
  width: 100%;
  height: 100%;
}

.preview-img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  @include full;
  .pagebox {
    position: absolute;
    left: 15px;
    /* #ifdef MP-WEIXIN */
    top: calc(56px + var(--status-bar-height));
    /* #endif */
    /* #ifndef MP-WEIXIN */
    top: calc(12px + var(--status-bar-height));
    /* #endif */
    z-index: 999;
    color: #fff;
    font-size: 32rpx;
  }
  .close-icon {
    position: absolute;
    right: 15px;
    /* #ifdef MP-WEIXIN */
    top: calc(56px + var(--status-bar-height));
    /* #endif */
    /* #ifndef MP-WEIXIN */
    top: calc(12px + var(--status-bar-height));
    /* #endif */
    z-index: 999;
    color: #fff;
    .aliicon {
      font-size: 40rpx;
    }
  }
  .pre-icon {
    position: absolute;
    left: 5px;
    top: 50%;
    z-index: 999;
    color: #fff;
    .aliicon {
      font-size: 60rpx;
    }
  }
  .next-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    z-index: 999;
    color: #fff;
    .aliicon {
      font-size: 60rpx;
    }
  }
  .mask {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    z-index: 5;
    @include full;
    &-swiper {
      @include full;
      &-img {
        @include full;
      }
    }
  }
}
</style>
